<template>
  <div id="app">
    <div class="content">
      <div class="card" v-for="(item, index) in list" :key="index"> 
        <div class="left">
          <div class="avatar-name">
            <el-avatar size="medium" :src="'http://www.liujn.top/bbs/api' + item.avatar" class="avatar" shape="square" v-if="show"></el-avatar>
            <p class="name">{{ item.username }}</p>
          </div>
        </div>
        <div class="right">
          <div class="right-name-text">
            <p class="text" v-for="(p, index2) in textArr[index]" :key="index2">{{ p }}</p>
            <el-image :src="'http://www.liujn.top/bbs/api' + item.image" v-if="item.image" class="reply-img" lazy v-image-preview></el-image>
          </div>
          <div class="time-reply">
            <p class="time">{{ index + 2 + "  楼"}}</p>
            <p class="time">{{ changeTime(item.posttime) }}</p>
            <el-button type="text" @click="open(item.post, item.username, item.id)" class="reply-button">[回复]</el-button>
          </div>

          <div class="reply" v-for="(reply, index) in item.replyzhongs" :key="index">
            <div class= "reply-left">
              <el-avatar size="medium" :src="'http://www.liujn.top/bbs/api' + reply.avatar" v-if="show" class="reply-avatar" ></el-avatar>
            </div>
            <div class="reply-right">
              <div class="reply-right-name-text">
                <p class="reply-name">{{ reply.username }} <span>回复</span> {{ reply.target }} <span>:</span></p>
                <p class="reply-text">{{ reply.text }}</p>
                <div class="time-reply">
                  <p class="reply-time">{{ changeTime(reply.posttime) }}</p>
                  <el-button type="text" @click="open(item.post, reply.username, item.id)" class="reply-button">[回复]</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    list: {type: Array}
  },
  mounted() {
    this.getText() 
  },
  methods: {

    // 整理数据，提取楼层里的图片地址，用于点击大图
    getText() {
      for(let i = 0; i < this.list.length; i++) {
        this.textArr[i] = this.list[i].text.split("\n")
      }
      this.show = true
    },

    // 点击回复弹出来的框框
    open(post, target, id) {
      if(this.$cookies.isKey("CookieId")) {
        this.$prompt('回复 ' + target + " :", '🎈', {
          customClass: "message-width",
          confirmButtonText: '回复',
          cancelButtonText: '取消',
          inputType: "text",
          inputPlaceholder: "回复不超过 255 个字",
          inputPattern: /^.{1,255}$/,
          inputErrorMessage: '回复字数在 1 - 255 个字符之间'
        }).then(({ value }) => {
          this.axios.post('http://www.liujn.top/bbs/api/reply/louzhonglou', {
            id: id,
            username: this.$cookies.get("UserName"),
            text: value,
            target: target,
            post: post
          }).then((res) => {
            if (res.data == 0) {
              this.$message({
                type: 'success',
                message: "回复成功！"
              })
              this.$parent.getArticle()
            }
            else {
              this.$message.error("回复错误！")
            }
            
            // this.$parent.Article()
          })
        })
      } else {
        this.$message.error("请先登录！")
      }
    },

    // 转换时间
    changeTime(time) {
      return new Date(+new Date(time)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
    }
  },
  data() {
    return {
      visible: false,
      show: false,
      textArr: [],
    }
  }
}
</script>

<style scoped>
  .content {
    width: 80%;
    margin: 0px auto 0px auto;
    padding-top: 20px;
    background-color: #fff;
  }

  .card {
    min-height: 200px;
    display: flex;
    border-top: 1px solid #ccc;
  }

  .avatar {
    width: 60px;
    height: 60px;
    margin: 0px auto;
    border: 3px solid #eee;
  }

  .floor {
    font-size: 12px;
    color: #777;
    margin-left: 10px;
  }

  .left {
    width: 120px;
    display: flex;
    flex-direction: column;
    background-color: rgb(249, 250, 255);
  }

  .reply-avatar {
    width: 40px;
    height: 40px;
    margin: 15px auto 0px auto;
  }

  .avatar-name {
    margin: 20px auto;
  }

  .right {
    width: 90%;
    padding: 15px 20px 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .right-name-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .right p {
    margin: 0px;
  }

  .name {
    font-size: 14px;
    color: #3bbcf0;
    font-weight: bold;
    margin: 10px;
  }

  .text {
    font-size: 16px;
    padding-bottom: 10px;
    line-height: 35px;
    letter-spacing: 2px;
    text-align: start;
    overflow-wrap:break-word;
    max-width: 100%;
  }

  .time {
    font-size: 12px;
    color: #777;
    align-self: flex-end;
    line-height: 12px;
    padding-right: 12px;
    /* padding-right: 20px; */
    
  }

  .reply {
    width: 100%;
    border-top: 1px solid #ddd;
    margin-top: 15px;
    display: flex;
  }

  .reply-left {
    width: 60px;
    display: flex;
    flex-direction: column;
    /* margin-left: 40px; */
  }
  .reply-right {
    width: 100%;
    padding: 15px 0px 0px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .reply-right-name-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .reply-name {
    font-size: 14px;
    color: #3bbcf0;
    font-weight: bold;
    display: inline;
  }
  .reply-text {
    text-align: start;
    font-size: 14px;
    padding-bottom: 10px;
    display: inline;
  }

  .time-reply {
    align-self: flex-end;
    display: flex;

  }
  .reply-button {
    font-size: 12px;
    color: #3bbcf0;
    padding: 0px 5px 0px 0px;
  }
  .reply-time {
    font-size: 12px;
    color: #777;
    align-self: flex-end;
    padding-right: 12px;
  }

  .reply span {
    color: #777;
  }

  .reply-img {
    width: 80%;
    margin-bottom: 40px;
  }

  

@media screen and (max-width: 768px) {
  .content {
    width: 94%;
    margin: 0px auto 0px auto;
    padding-top: 20px;
    background-color: #fff;
  }

  .reply-left {
    display: none;
  }

  .reply-img {
    width: 100%;
    margin-bottom: 40px;
  }

  .left {
    width: 25%;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    background-color: rgb(249, 250, 255);
  }

  .right {
    width: 75%;
    padding: 15px 10px 15px 10px;
  }  
  
  
}
</style>

<style>

  @media screen and (max-width: 768px) {
    .message-width{
      width: 350px;
    }
  }
</style>